<template>
  <div class="navbox">
    <div class="navbox1">
      <!-- 导航栏第一部分 -->
      <div class="box1f">
        <div class="box1">
          <div class="box1chil">
            <div class="log"></div>
            <ul class="navul">
              <li
                class="navli"
                :class="num == 1 ? 'active' : ''"
                @click="changeback(1)"
              >
                发现音乐
                <span class="lispan" v-show="num == 1 ? 'true' : ''"></span>
              </li>
              <li
                class="navli"
                :class="num == 2 ? 'active' : ''"
                @click="changeback(2)"
              >
                我的音乐
                <span class="lispan" v-show="num == 2 ? 'true' : ''"></span>
              </li>
              <li
                class="navli"
                :class="num == 3 ? 'active' : ''"
                @click="changeback(3)"
              >
                关注
                <span class="lispan" v-show="num == 3 ? 'true' : ''"></span>
              </li>
              <li
                class="navli"
                :class="num == 4 ? 'active' : ''"
                @click="changeback(4)"
              >
                商城
                <span class="lispan" v-show="num == 4 ? 'true' : ''"></span>
              </li>
              <li
                class="navli"
                :class="num == 5 ? 'active' : ''"
                @click="changeback(5)"
              >
                音乐人
                <span class="lispan" v-show="num == 5 ? 'true' : ''"></span>
              </li>
              <li
                class="navli"
                :class="num == 6 ? 'active' : ''"
                @click="changeback(6)"
              >
                下载客户端
                <span class="lispan" v-show="num == 6 ? 'true' : ''"></span>
                <div class="hot"></div>
              </li>
            </ul>
            <!-- 搜索框 -->
            <div id="inputbox">
              <input
                type="text"
                class="box1input"
                placeholder="用户/音乐/视频/电台"
                v-model="selecttext"
                @input="getdata"
                @click="showsongdata"
              />
              <!-- 搜索内容框 -->
              <div class="songdata" v-show="ok">
                <p
                  class="closep"
                  v-if="record.length > 0"
                  @click="clickallrecord"
                >
                  清空历史搜索
                </p>
                <!-- 历史搜索 -->
                <span class="songdataspan" v-for="data in record" :key="data">
                  {{ data }}
                  <span class="spanclose" @click="closeone(data)">x</span>
                </span>
                <ul>
                  <!-- bug v-for 不跟 v-if 一起使用 -->
                  <!-- songdata -->
                  <li
                    v-for="data in computedsongdata"
                    :key="data.id"
                    @click="clicksong(data)"
                  >
                    {{ data.name }}-{{ data.ar[0].name }}
                  </li>
                </ul>
              </div>
            </div>
            <div class="btn1">
              <span class="span1">创作者中心</span>
            </div>
            <div class="btn2" v-show="loginbtn">
              <a href="#" class="btn2a" @click="login()">登录</a>
            </div>
            <div class="btn3" v-show="!loginbtn">
              <img :src="userphoto" alt="" class="btn3img" />
            </div>
          </div>
        </div>
      </div>
      <!-- 导航栏第二部分 -->
      <div class="box2" :class="num == 1 ? '' : 'hiddenul'">
        <div class="b2-1">
          <div class="ulbox">
            <ul class="box2ul">
              <li
                class="box2li"
                v-for="(data, index) in datalist"
                :key="data.id"
                @click="chlickred(index)"
              >
                <span class="b2lispan" :class="rednum == index ? 'red' : ''">{{
                  data.name
                }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isclick: 'active',
      num: 1,
      rednum: 0,
      datalist: [
        {
          id: 1,
          name: '推荐'
        },
        {
          id: 2,
          name: '排行榜'
        },
        {
          id: 3,
          name: '歌单'
        },
        {
          id: 4,
          name: '主播电台'
        },
        {
          id: 5,
          name: '歌手'
        },
        {
          id: 6,
          name: '新碟上架'
        }
      ],
      loginbtn: true,
      // 头像
      userphoto: '',
      // 搜索内容
      selecttext: '',
      // 歌曲数据
      songdata: [],
      // 搜索记录
      record: [],
      // 瞎定义的临时变量
      ok: false,
      closespan: false
    }
  },
  created () {
    // 获取本地搜索记录
    this.getrecord()
  },
  mounted () {
    this.$bus.$on('hiddenbtn', (res) => {
      this.userphoto = res
      this.loginbtn = false
    })
  },
  methods: {
    changeback (i) {
      this.num = i
      if (i === 1) {
        // 显示首页
        this.$router.push('/')
      } else if (i === 2) {
        this.$router.push('/mymusic')
      } else if (i === 3) {
        this.$router.push('/concern')
      } else if (i === 4) {
        location.href = '#'
      }
    },
    chlickred (i) {
      this.rednum = i
    },
    // 点击登录按钮 传值给Login.vue组件，显示登录输入框
    login () {
      this.$bus.$emit('loginshow')
    },
    // 搜索功能
    getdata () {
      this.maxaxios
        .get('/cloudsearch', { keywords: this.selecttext })
        .then((res) => {
          // console.log(res);
          if (res.code === 200) {
            this.songdata = res.result.songs
            console.log(this.songdata)
          }
        })
      if (this.selecttext === '') {
        this.songdata = []
      }
    },
    // 添加搜索记录
    clicksong (data) {
      this.ok = false
      if (this.record.length < 1) {
        this.record.unshift(data.name)
        // console.log(this.record);
      } else {
        for (let i = 0; i < this.record.length; i++) {
          if (this.record[i] === data.name) {
            console.log('页面跳转', data.id)
            this.$router.push({
              path: `/playsong/${data.id}`
            })
            return
          }
        }
        this.record.unshift(data.name)
      }
      // 存储历史搜索到本地
      this.setrecord()
      // 页面跳转
      console.log('页面跳转', data.id)
      this.$router.push({
        path: `/playsong/${data.id}`
      })
      this.$bus.$emit('updata')
    },
    // 显示搜素记录
    showsongdata () {
      this.ok = !this.ok
    },
    // 清空历史记录
    clickallrecord () {
      this.record = []
      // console.log(this.record);
      // 清空本地存储记录
      localStorage.clear('record')
    },
    // 删除单挑数据
    closeone (name) {
      const newarray = this.record.filter((item) => {
        return item !== name
      })
      this.record = newarray
      // 更新本地历史记录
      this.setrecord()
    },
    // 获取本地搜索记录
    getrecord () {
      let newrecord = null
      newrecord = JSON.parse(localStorage.getItem('record'))
      // console.log("本地数据", newrecord);
      if (localStorage.getItem('record')) {
        for (let i = 0; i < newrecord.length; i++) {
          this.record.push(newrecord[i])
        }
        // console.log(localStorage.getItem("record"));
      }
    },
    // 存储历史搜索到本地记录
    setrecord () {
      localStorage.clear('record')
      localStorage.setItem('record', JSON.stringify(this.record))
      // console.log("搜索记录", this.record);
    }
  },
  // 计算属性
  computed: {
    computedsongdata () {
      const array = []
      if (this.songdata.length > 0) {
        for (let i = 0; i < 4; i++) {
          array.push(this.songdata[i])
        }
      }
      // console.log(array);
      return array
    }
  }
}
</script>

<style scoped>
.navbox {
  width: 100%;
  height: 110px;
}
.navbox1 {
  width: 100%;
  height: 110px;
  margin: auto;
  position: relative;
  box-sizing: border-box;
}
.box1f {
  width: 100%;
  height: 80px;
  background-color: #242424;
}
.box1 {
  width: 1536px;
  height: 80px;
  margin: auto;
}
.box1chil {
  width: 75%;
  height: 100%;
  margin: auto;
  position: relative;
}
.box1::after {
  content: "";
  clear: both;
  display: block;
}
.log {
  width: 180px;
  height: 80px;
  overflow: hidden;
  float: left;
  background-image: url(../../public/img/small-img.png);
  background-position: 0 5px;
  background-repeat: no-repeat;
}
.navul {
  width: 50%;
  height: 100%;
  list-style: none;
  display: inline-block;
}
.navli {
  padding-left: 20px;
  padding-right: 20px;
  display: inline-block;
  line-height: 80px;
  color: #cccccc;
  font-size: 14px;
  cursor: pointer;
  position: relative;
}
.active {
  background-color: black;
  color: white;
}
.lispan {
  width: 14px;
  height: 7px;
  display: inline-block;
  position: absolute;
  bottom: 0px;
  /* bug left不能实时变化 */
  left: 50%;
  transform: translateX(-50%);
  background-image: url(../../public/img/small-img.png);
  background-repeat: no-repeat;
  background-position: -215px -140px;
}
.navli:hover {
  background-color: black;
  color: white;
}
#inputbox {
  width: 150px;
  height: 32px;
  border-radius: 32px;
  margin-top: 23px;
  display: inline-block;
  background-color: white;
  position: absolute;
  background-image: url(../../public/img/small-img.png);
  background-position: 0 -99px;
  background-repeat: no-repeat;
  z-index: 99;
}
.box1input {
  width: 70%;
  border: 0;
  margin: 9px;
  margin-left: 30px;
  outline: none;
  font-size: 12px;
}
.songdata {
  width: 150%;
  /* height: 200px; */
  background-color: #ffffff;
  margin-top: 10px;
  border-radius: 5px;
  z-index: 2;
  position: absolute;
  box-shadow: 0 4px 7px #555;
}
.closep {
  width: 100%;
  font-size: 12px;
  text-align: center;
  color: #4d4d4dac;
  cursor: pointer;
}
.songdataspan {
  display: inline-block;
  font-size: 12px;
  padding-left: 5px;
  padding-right: 5px;
  line-height: 20px;
  text-align: center;
  /* background-color: rgb(11, 147, 142); */
  border: #787878 1px solid;
  border-radius: 5px;
}
.spanclose {
  /* display: none; */
  cursor: pointer;
}
.songdata ul {
  width: 100%;
}
.songdata ul :first-child {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.songdata ul li {
  list-style: none;
  width: 90%;
  line-height: 30px;
  margin: auto;
  /* background-color: #9b0909; */
  cursor: pointer;

  overflow: hidden; /* 超出的文本隐藏 */
  text-overflow: ellipsis; /*溢出用省略号显示*/
  white-space: nowrap; /*溢出不换行*/
}
.songdata ul li:hover {
  background-color: #e3e5e7;
}
.hot {
  width: 30px;
  height: 15px;
  background-image: url(../../public/img/small-img.png);
  background-repeat: no-repeat;
  background-position: -190px 0;
  display: inline-block;
}
.btn1 {
  width: 80px;
  height: 30px;
  border: 1px solid #414141;
  border-radius: 20px;
  display: inline-block;
  position: absolute;
  top: 22px;
  right: 140px;
  cursor: pointer;
}
.btn1:hover {
  border: 1px solid white;
}
.btn1:hover .span1 {
  color: white;
}
.span1 {
  width: 80%;
  line-height: 30px;
  display: inline-block;
  margin-left: 12%;
  font-size: 12px;
  color: #cccccc;
}
.btn2 {
  width: 30px;
  height: 40px;
  display: inline-block;
  position: absolute;
  right: 100px;
  right: 90px;
  top: 17px;
}
.btn3 {
  width: 40px;
  height: 40px;
  display: inline-block;
  position: absolute;
  right: 100px;
  right: 90px;
  top: 17px;
  /* background-color: #9b0909; */
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}
.btn3img {
  width: 100%;
  height: 100%;
}
.btn2:hover .btn2a {
  color: #cccccc;
}
.btn2a {
  width: 100%;
  line-height: 40px;
  text-align: center;
  display: inline-block;
  font-size: 12px;
  text-decoration: none;
  color: #787878;
}
.box2 {
  width: 100%;
  height: 30px;
}
.hiddenul {
  position: absolute;
  top: 54px;
  z-index: -1;
}
.b2-1 {
  width: 100%;
  height: 30px;
  background-color: #c20c0c;
  position: absolute;
  z-index: 0;
  /* border-top: 1px solid black; */
}
.ulbox {
  width: 1536px;
  height: 30px;
  margin: auto;
}
.box2ul {
  width: 40%;
  /* height: 100%;background-color: rgb(97, 154, 115); */
  margin-left: 370px;
}
.box2li {
  list-style: none;
  display: inline-block;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}
.b2lispan {
  font-size: 12px;
  display: inline-block;
  width: 100%;
  line-height: 20px;
  padding-left: 7px;
  padding-right: 7px;
  border-radius: 20px;
  color: white;
}
.box2li:hover .b2lispan {
  background-color: #9b0909;
}
.red {
  background-color: #9b0909;
}
</style>
